<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <script src="../js/jquery-3.6.0.js"></script>
    <style>
        #box{
            width: 200px;
            height: 200px;
            border: 1px red solid;
            background-color: pink;
        }

    </style>
</head>
<body>
<!--1. 准备一个容器-->
<div id="app">
    <button @click="fun1">单击事件</button>
    <button @dblclick="fun2">双击事件</button>
    <input type="text" @focus="fun3" @blur="fun4">
    <select name="city" id="city" @change="fun5">
        <option>北京</option>
        <option>武汉</option>
        <option>郑州</option>
    </select>
</div>
<div id="box" @mouseenter="fun6" @mousemove="fun7" @mouseleave="fun8" @keyup="fun9" @keyup.enter="fun10">

</div>


</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {

        },
        methods:{
            fun1:function () {
                alert("单击事件触发");
            },
            fun2:function () {
                alert("双击事件触发")
            },
            fun3:function () {
                console.log("获取焦点");
            },
            fun4:function () {
                console.log("失去焦点");
            },
            fun5:function () {
                alert($(event.target).val());
            },
        }
    });
    let vm1 = new Vue({
        el:"#box",
        data: {

        },
        methods: {
            fun6:function () {
                console.log("鼠标进入")
            },
            fun7:function () {
                console.log("鼠标移动")
            },
            fun8:function () {
                console.log("鼠标离开")
            },
            fun9:function () {
                console.log("键盘按下")
                alert("鼠标按下了")
                $("#box").css("backgroundColor","red");
            },
            fun10:function () {
                console.log("键盘松开")
                $("#box").css("backgroundColor","green");
            }
        }
    });
</script>


</body>
</html>